<template>
  <div class="container">
    <!-- header -->
    <van-nav-bar
      fixed
      title="黑马头条"
      right-text="搜索"
      @click-right="onClickRight"
      v-if="isShowTop"
    />
    <!-- 内容区域 -->
    <div class="my-wrapper" :class="{ noTop: !isShowTop }">
      <!-- 二级路由的挂载点 -->
      <router-view />
    </div>
    <!-- 导航区域 -->
    <van-tabbar route>
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/question" icon="search">问答</van-tabbar-item>
      <van-tabbar-item to="/video" icon="video-o">视频</van-tabbar-item>
      <van-tabbar-item to="/user" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
/**
 * 控制元素是否显示和隐藏=》v-if/v-show
 * 区别：
 * 1. v-if=> 添加/删除元素控制
 * 2. v-show=> 样式display:block/none
 * 需求：除了我的页面=》其它页面都显示头部
 * 可以根据路由的路径=》path
 */
// import { cbe } from '@/utils/esm'
export default {
  // 组件的名字
  name: 'home-index',
  computed: {
    isShowTop () {
      return this.$route.path !== '/user'
    }
  },
  created () {
    // console.log('组件：', cbe)
  },
  methods: {
    onClickRight () {
      this.$router.push('/search')
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  .my-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 46px;
    padding-bottom: 50px;
    box-sizing: border-box;
    &.noTop {
      padding-top: 0;
    }
  }
}
</style>
